<template>
    <div class="app-container account-charge">
        <el-form :model="state.form" :rules="state.rules" ref="chargeFormRef" label-width="100">
            <el-card shadow="never">
                <el-divider content-position="center">账号充值</el-divider>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="手机号查询" prop="accountid">
                            <el-select v-model="state.form.accountid" filterable remote placeholder="输入手机号查询"
                                :remote-method="getAccountList" :loading="state.searchLoading" class="w-full"
                                @change="userAccountChange" @visible-change="selectVisibleChange">
                                <el-option v-for="(item, index) in state.userOptions" :key="`account_${index}`"
                                    :label="item.label" :value="item.accountid" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                        v-if="Object.keys(state.currentChosenAccountInfo).length">
                        <el-form-item label="用户信息">
                            <el-descriptions size="small" :column="3" border class="w-full">
                                <el-descriptions-item label="用户账号">{{ state.currentChosenAccountInfo.accountname
                                }}</el-descriptions-item>
                                <el-descriptions-item label="联系人">{{ state.currentChosenAccountInfo.accountlxr
                                }}</el-descriptions-item>
                                <el-descriptions-item label="联系人手机号">{{ state.currentChosenAccountInfo.accountlxrphone
                                }}</el-descriptions-item>
                            </el-descriptions>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="充值金额" prop="accountprice">
                            <el-input v-model="state.form.accountprice" placeholder="充值金额" class="w-full"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="current-agent-info flex justify-center mb-4">
                    <p>当前可用余额：{{ state.currentAgentsInfo.accountprice }}</p>
                </div>
                <div class="submit-box flex justify-center">
                    <el-button type="primary" @click="handleChargeConfirm" size="large" class="w-28">充值</el-button>
                </div>
            </el-card>
        </el-form>
    </div>
</template>

<script setup>
import useAgentsManageManageStore from '@store/modules/agentsManage'
import useUserStore from '@store/modules/user'
import useAccountManageStore from '@store/modules/accountManage'

const agentsManageStore = useAgentsManageManageStore()
const userStore = useUserStore()
const accountManageStore = useAccountManageStore()
const { proxy } = getCurrentInstance()

const chargeFormRef = ref(null)
const state = reactive({
    searchLoading: false,
    currentAgentsInfo: {}, // 当前代理商信息
    userOptions: [],
    currentChosenAccountInfo: {}, // 当前选择的账号信息
    form: {
        accountid: '',
        accountprice: ''
    },
    rules: {
        accountid: [
            { required: true, message: '请搜索并选择用户', trigger: 'blur' }
        ],
        accountprice: [
            { required: true, message: '请输入充值金额', trigger: 'blur' }
        ]
    }
})

const getCurrentAgentInfo = async () => {
    try {
        const data = await accountManageStore.view({ accountid: userStore.accountid })
        state.currentAgentsInfo = data
    } catch (error) {

    }
}

const getAccountList = async (phoneNum) => {
    try {
        state.searchLoading = true
        const params = { accountname: phoneNum, accountagentsid: userStore.agentsid == 'null' ? '' : userStore.agentsid, accounttype: '商户', ['accountstatus.Value']: 1, pageindex: 1, rows: 9999 }
        const data = await accountManageStore.list(params)
        data.Data.forEach(item => {
            item.label = `${item.accountname}_${item.accountlxr}`
        })
        state.userOptions = data.Data
        state.searchLoading = false
    } catch (error) {

    }
}

const userAccountChange = (item) => {
    const current = state.userOptions.find(i => i.accountid === item)
    state.currentChosenAccountInfo = current
}

const handleChargeConfirm = async () => {
    //判断可用金额
    if (Number(state.form.accountprice) > Number(state.currentAgentsInfo.accountprice)) {
        proxy.$modal.alertError('充值金额不能大于可用余额！')
        return
    }

    chargeFormRef.value.validate(async (valid) => {
        if (valid) {
            await proxy.$modal.confirm(`确认充值${state.form.accountprice}？`)
            try {
                const params = {
                    accountid: state.currentChosenAccountInfo.accountid,
                    money: state.form.accountprice,
                }

                if (userStore.accountlx === '管理员') {
                    await accountManageStore.accountAdminCharge(params)
                } else {
                    await accountManageStore.accountCharge(params)
                }

                proxy.$modal.alertSuccess('充值成功！')
                chargeFormRef.value.resetFields()
                state.currentChosenAccountInfo = {}
                await getCurrentAgentInfo()
            } catch (error) {
                proxy.$modal.alertError('充值失败！' + String(error))
            }
        }
    })

}

const selectVisibleChange = ()=>{
    console.log(state.userOptions)
}

onMounted(() => {
    // console.log(userStore.accountlx, 'userStore.accountlx')
    getCurrentAgentInfo()
})
</script>

<style lang="scss" scoped></style>